<script lang="tsx">
import { defineComponent, ref, defineEmits, type ExtractPropTypes } from 'vue'
import { ElInput, inputProps } from 'element-plus'
import { omitSelfProps, makeValue, IgnoreProps } from './utils'
export const oInputSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  tip: {
    type: String
  },
  ...IgnoreProps
}
export const oInputProps = {
  ...inputProps,
  ...oInputSelfProps
}
export type oInputPropsType = ExtractPropTypes<typeof oInputProps>
const oInput = defineComponent({
  name: 'one-input',
  components: { ElInput },
  props: oInputProps,
  // emits: ['change'],
  // inheritAttrs: false,
  setup(props: oInputPropsType, context) {
    const inProps = omitSelfProps<oInputPropsType, typeof oInputSelfProps>(props, oInputSelfProps)
    return () => (
      <el-input
        {...inProps}
        clearable={true}
        class={{ [oInput.name]: true, 'one-input-inline': props.inline }}
        v-model={props.formData![props.prop!]}
        v-slots={props.slots}
      ></el-input>

      /* onChange={(r: any) => {
          console.log('in', r)
        }} */
    )
  }
})
export default oInput
</script>
<style lang="scss">
div.one-input-inline {
  width: var(--one-form-item);
}
</style>
